<!--商品的一个swiper,可以放大图片-->
<template>
    <div id="Swipers">
        <div class="small" :class="{'big-swiper':bigger}" @click="bigger = !bigger">
            <swiper :options="swiperOption" ref="mySwiper" v-show="swiperContent.imgList && swiperContent.imgList.length > 0">
                <swiper-slide  v-for="(imgItem,index) in swiperContent.imgList" :key="index" >
                   <div class="swiper-slide">
                        <img class="width-full booking-item-top-img" :src="imgItem"/>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>
<script>
    import  { swiper, swiperSlide }   from 'vue-awesome-swiper'

    export default {
        name: 'Swipers',
        props: {
            swiperContentProp: {
                type: Object
            },
            swiperOptionProp:Object
        },
        data() {
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationType: 'fraction',
                    direction: 'horizontal',
                    observer: true,
                    observeParents: true,
                    loop:true,
                },
                swiperContent:{
                    imgList:[],
                    isLoop:false
                },
                bigger:false ,
            }
        },
        created(){
            this.swiperContent = Object.assign({},this.swiperContent,this.swiperContentProp);
            this.swiperOption = Object.assign({},this.swiperOption,this.swiperOptionProp);
            if(this.swiperContent.imgList && this.swiperContent.imgList.length === 1 && this.swiperContent.isLoop){
                this.swiperOption.loop = false;
            }
        },
        components: {
            swiper,
            swiperSlide,
        },
        mounted(){
            // this.swiper.slideTo(1, 3000, false)
        },
        watch:{
            swiperContentProp:function (val) {
                this.swiperContent = Object.assign({},this.swiperContent,val);
                if(val && Object.keys(val).length ){
                    if(this.swiperContent.imgList.length > 1 && this.swiperContent.isLoop){
                        this.swiperOption.loop = true;
                    }
                }
            }
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/swiper.min.css');
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        height: 3.75rem;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .big-swiper{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        background-color: #000;
        z-index: 1060;
        .swiper-container{
            position: relative;
            display: block;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .swiper-slide{
            height: 100%;
            img{
                height: 6.67rem;
                height: 100vh;
                object-fit: contain;
            }
        }
    }
</style>